<template>
  <div>
    <van-nav-bar class="huifu" :title="item.reply_count>0 ? `${item.reply_count}条回复`:'暂无回复'">
      <van-icon slot="left" name="cross" @click="$emit('close')"/>
    </van-nav-bar>
    <div class="bbb"></div>
    <!-- 插入评论列表组件 -->
    <article-item :item="item"></article-item>
    <div style="font-size:20px;">全部回复</div>
    <!-- 传递评论的id -->
      <article-comments :source="item.com_id" type='c' :list="list"></article-comments>
    <div class="reply" >
      <van-button round size="mini" class="replyBtn" @click="toReplyBtn">写评论</van-button>
    </div>
    <!-- 发布弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '20%' }">
    <article-text :target="item.com_id"  @post-success="onpostSuccess"></article-text>
    </van-popup>
  </div>
</template>
           
<script>
import articleItem from "@/components/article/article-comm-item";
import articleComments from "@/components/article/article-comments";
import articleText from "@/components/article/article-comm-text";
import { log } from 'util';

export default {
  components: {
    articleItem,
    articleComments,
    articleText
  }, 
  props: {
    item: {
        type:[Array,Object],
        required:true
    }
  },
  data() {
    return {
        show:false,
        list:[]
    };
  },
  methods: {
      //写评论按钮-----------------------
      toReplyBtn() {
          this.show=true
      },
      //点击发布---------------------------
    onpostSuccess(data) {
        // console.log(data);
        //关闭弹窗
        this.show=false
        //更新回复的数量    
         this.item.reply_count++
         //把发布的信息更新到页面顶部
         this.list.unshift(data.new_obj)

    }
  }
};
</script>
<style scoped lang="less">
.huifu {
  text-align: center;
  font-size: 40px;
}
.van-nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    
}
.bbb{
    margin-top:100px
}
.reply {
  position: fixed;
  bottom: 0;
  border-top: 1px solid #7777;
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  .replyBtn {
    width: 400px;
  }
}
</style>
